<template>
  <div class="z-header">
    <el-row :gutter="20">
      <el-col 
        :span="4"
        class="logo">
        <nuxt-link to="/">
          <img 
            src="@/assets/imgs/logo.png"
            width="42">
          &nbsp;
          &nbsp;
          <h3>知行手账</h3>
        </nuxt-link>
      </el-col>
      <el-col :span="15">
        <z-nav/>
      </el-col>
      <el-col :span="5">
        <z-user/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import zNav from './nav.vue'
  import zUser from './userState';
  export default {
    components:{
      zNav,
      zUser
    }
  }
</script>

<style scoped>
.z-header{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: center;
}
.z-header>.el-row{
  width: 1200px;
}
.logo img{
  display: block;
  margin-top: 4px;
}
.logo>a{
  display: flex;
  align-items: center;
}
.logo h3{
  color: #64d279;
  font-size: 1.2rem
}
</style>